import Taro from '@tarojs/taro'
import { useSelector } from 'react-redux'
import Styles from './index.module.scss'
import { HotInfo } from './type'

export type Props = {
  item: HotInfo
  index: number
}

export default function HotItem(props: Props) {
  //获取仓库token信息
  const token = useSelector((state: any) => state.user.token)
  const handelPay = (event) => {
    event.stopPropagation()
    console.log('token', token)

    if (!token) {
      Taro.showToast({
        title: '请先登录',
        icon: 'none',
      })
    } else {
      Taro.navigateTo({
        url: `/pages/newOrder/index?id=${props.item.id}`,
      })
    }
  }

  const handleEnterProductDetailPage = () => {
    Taro.navigateTo({
      url: `/pages/productDetail/index?id=${props.item.id}`,
    })
  }

  return (
    <div className={Styles.hot_item} onClick={handleEnterProductDetailPage}>
      <div className={Styles.left}>
        <div className={Styles.hot_icon}>
          <span>{props.index + 4}</span>
        </div>
        <div className={Styles.hot_img}>
          <img src={props.item.coverUrl} alt='' className={Styles.img_hot} />
        </div>
      </div>

      <div className={Styles.right}>
        <div className={Styles.hot_title}>{props.item.name}</div>
        <div className={Styles.hot_price}>
          <span className={Styles.word}>¥</span>
          {props.item.price}
        </div>
        <div className={Styles.buy_btn}>
          <button className={Styles.btn} onClick={handelPay}>
            <span className={Styles.money}>去购买</span>
          </button>
        </div>
      </div>
    </div>
  )
}
